<template>
  <div class="cartTopBar">
    <a href="javascript:void(0);"
       class="sideButton"
       @click="tohome">
      <van-icon name="arrow-left"
                size="25"
                color="#333333" />
    </a>
    <div class="cartNum">购物车({{this.$store.state.cart}})</div>
    <div class="mg">
      <span v-show="this.$store.state.carttype"
            @click="swtype()">管理</span>
      <span v-show="!this.$store.state.carttype"
            @click="suc() ">完成</span>
      <van-icon name="ellipsis"
                size="25"
                color="#333333" />
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    tohome () {
      this.$router.push("/home");
    },
    swtype () {
      this.$store.state.carttype = false;
      this.$store.state.cartlist.forEach(item => (item.type = false));
    },
    suc () {
      this.$store.state.carttype = true;
      this.$store.state.cartlist.forEach(item => (item.type = true));
    }
  }
};
</script>
<style scoped>
.cartTopBar {
  width: 100vw;
  height: 0.88rem;
  display: flex;
  background-color: white;
}
.sideButton {
  display: block;
  width: 0.88rem;
  height: 0.88rem;
}
.sideButton i {
  display: block;
  width: 0.88rem;
  height: 0.88rem;
  font: 30px;
  line-height: 0.88rem;
  text-align: center;
}
.cartNum {
  flex: 1;
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.88rem;
  text-align: center;
}
.mg {
  width: 1.42rem;
  height: 0.88rem;
  display: flex;
}
.mg i {
  display: block;
  width: 0.88rem;
  height: 0.88rem;
  font: 30px;
  line-height: 0.88rem;
  text-align: center;
}
.mg span {
  display: block;
  width: 0.54rem;
  height: 0.88rem;
  line-height: 0.88rem;
  color: #333333;
  font-size: 0.24rem;
}
</style>